<template>
	<view class="box">
		<view class="title"><view class="biaoshi"></view>举报信息</view>
		<view class="kiss-list">
			<view class="kiss-list-title" style="border: none;padding: 24rpx 32rpx 24rpx;">
				<view class="left" style="margin-right: 6rpx;">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					举报人姓名
				</view>
				<view class="right1">
					<view class="my-input">
						<u-input border="none" placeholder="请输入举报人姓名" v-model="dataForm.reportUser" inputAlign="left"
							maxlength="12">
							<!-- <template slot="suffix">
								<div class="myLength">{{nameLength}}/12</div>
							</template> -->
						</u-input>
					</view>
				</view>
			</view>
		</view>
		
		<view class="line1"></view>
		<view class="kiss-list">
			<view class="kiss-list-title" style="border: none;padding: 24rpx 32rpx 24rpx;">
				<view class="left" style="margin-right: 6rpx;">
					身份信息
				</view>
				<view class="right1">
					<view class="my-input">
						<u-input border="none" placeholder="请输入身份证号" v-model="dataForm.reportUserCard" inputAlign="left"
							maxlength="18">
							<!-- <template slot="suffix">
								<div class="myLength">{{reportUserCardLength}}/12</div>
							</template> -->
						</u-input>
					</view>
				</view>
			</view>
		</view>
		<view class="line1"></view>
		<view class="kiss-list">
			<view class="kiss-list-title" style="border: none;padding: 24rpx 32rpx 24rpx;">
				<view class="left" style="margin-right: 6rpx;">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					被举报单位
				</view>
				<view class="right1">
					<view class="my-input">
						<u-input border="none" placeholder="请输入举报单位" v-model="dataForm.unitName" inputAlign="left"
							maxlength="12">
							<!-- <template slot="suffix">
								<div class="myLength">{{unitNameLength}}/12</div>
							</template> -->
						</u-input>
					</view>
				</view>
			</view>
		</view>
		<view class="line1"></view>
		<view class="kiss-list" @click="showTown=true">
			<view class="kiss-list-title">
				<view class="left">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					问题所在街道
				</view>
				<view class="right1" style="width: 50vw;" v-if="isInspec == 0">
					<view style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: left;"
						:class="[dataForm.townName != '' ? 'select-bg' : 'sel']">
						{{ dataForm.townName != '' ? dataForm.townName : '请选择问题所在街道' }}
					</view>
					<view class="iconfont icon-app-xiangyou sel"></view>
				</view>
			</view>
		</view>
		<view class="line1"></view>
		<view class="kiss-upDown-list">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					详细地址
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea border="none" class="textrea" count v-model="dataForm.address" cursorSpacing="60" placeholder="请输入问题详细地址"
					maxlength="64">
				</u--textarea>
			</view>
		</view>
		<view class="line1"></view>
		<view class="kiss-list">
			<view class="kiss-list-title" style="border: none;padding: 24rpx 32rpx 24rpx;">
				<view class="left" style="margin-right: 6rpx;">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					举报接收单位
				</view>
				<view class="right1">
					<view class="my-input">
						<u-input border="none"  placeholder="请输入举报人姓名" readonly :value="'宁乡应急管理局'" inputAlign="left" 
							maxlength="12">
						</u-input>
					</view>
				</view>
			</view>
		</view>
		<view class="line1"></view>
		<view class="kiss-upDown-list">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					举报内容
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea border="none" class="textrea" count v-model="dataForm.reportContent" cursorSpacing="60" placeholder="请输入举报内容"
					maxlength="1000">
				</u--textarea>
			</view>
		</view>
		<view class="line1"></view>
		<view class="tigs">
			提示：举报内容中请谨慎透露个人信息
		</view>
		<view class="line8"></view>
		<view class="title"><view class="biaoshi"></view>我要上传（选填）</view>
		<view class="kiss-title">
			<view class="left">
				图片上传<view v-if="isInspec == 0" style="margin-left: 32rpx; color: #8c8c8c;font-size: 26rpx;">(可传9张)</view>
			</view>
		</view>
		
		<view class="kiss-upload" style="padding: 32rpx 32rpx 16rpx;">
			<uploadImg :maxCount="isInspec == 0?9:fileList1.length" @getdata="getdata" :fileType="16"
				:fileList="fileList1" :sourceType="sourceType" :deletable="isInspec == 0"
				@deletePicture="deletePicture"></uploadImg>
		</view>
		<view class="line1"></view>
		<view class="bx-title">
			<view class="left">
				附件上传<view style="margin-left: 32rpx; color: #8c8c8c;font-size: 26rpx;">(可传5个)</view>
			</view>
		</view>
		<view class="bx-upload" style="padding: 32rpx 30rpx 32rpx;">
				<view class="tab-list"  v-if="wxfileList.length>0" v-for="(item,index) in wxfileList" :key="index">
					<view class="tab-left">
						<image src="../../static/images/beijian/wenjian.png"></image>
						<!-- <view class="iconfont icon-app-wenjianxuanzhong iconfontsize"></view> -->
					</view>
					<view class="tab-right">
						<view class="data-txt">
							<view class="txt1">{{item.name}}</view>
							<view class="txt3">{{item.size}}kb</view>
						</view>
						<view class="iconfont icon-app-delete1" style="color: #fa4016;"
							@click="deleteFileitem(item,index)">
						</view>
					</view>
				</view>
		
			<uploadfile :maxCount="5" :fileType="13" :fileLength="wxfileList.length" @getdata="getdata3">
				<view class="add-file" >
					<view style="font-size: 30rpx;">+</view>添加附件
				</view>
			</uploadfile>
		</view>
		
		<!-- 底部按钮 -->
		<view class="xing-subside"></view>
		<view class="xing-bottom">
			<view class="btn-right" @click="$dianji(sumbit,'onoff5')">提交</view>
		</view>

		<!-- 街道 -->
		<u-picker :show="showTown" :columns="townColumns" keyName="name" @confirm="onChangeTown"
			@cancel="cancelTown">
		</u-picker>
		
	</view>
</template>

<script>
	import uploadImg from './components/uploadimg/uploadimg.vue';
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				nameLength: 0,
				reportUserCardLength:0,
				unitNameLength:0,
				townColumns: [
					[]
				],
				showTown:false,
				
				// 培训id
				id: '',
				show: false,
				showBack: false,
				isInspec: 0,
				// 详情
				dataForm: {
					reportUser:'',
					reportUserCard:'',
					unitName:'',
					townId:'',
					townName:'',
					address:'',
					acceptUnit:'宁乡应急管理局',
					reportContent:''
				},
				
				fileList1: [],
				saveParams: {
					pictures: '',
				},
				sourceType: ['album', 'camera'],
				onoff5: true,
				wxfileList: [], //演练文件上传集合
			}
		},
		watch: {
			'dataForm.reportUser'(val) {
				this.nameLength = val.length
			},
			'dataForm.reportUserCard'(val) {
				this.reportUserCardLength = val.length
			},
			'dataForm.unitName'(val) {
				this.unitNameLength = val.length
			},
		},
		onLoad() {
			this.getTownColumns()
		},
		
		onShow() {
			
		},
		methods: {
			getTownColumns(){
				uni.$u.http.get(`/manage/api/pubAreaInfo/getTownList`).then(res => {
					if (res.code == 0) {
						this.townColumns = [res.data]
					}
				}).catch(err => {})
			},
			onChangeTown(e) {
				this.dataForm.townName = e.value[0].name
				this.dataForm.townId = e.value[0].areaCode
				this.showTown = false
			},
			cancelTown() {
				this.showTown = false
			},
			
			// 提交
			sumbit() {
				if (this.dataForm.reportUser == '') {
					return uni.$u.toast("请填写举报人姓名")
				}
				if (this.dataForm.unitName == '') {
					return uni.$u.toast("请填写被举报单位")
				}
				if (this.dataForm.townId == '') {
					return uni.$u.toast("请选择问题所在街道")
				}
				if (this.dataForm.address == '') {
					return uni.$u.toast("请填写详细地址")
				}
				if (this.dataForm.reportContent == '') {
					return uni.$u.toast("请填写举报内容")
				}
				if (this.dataForm.townId == '') {
					return uni.$u.toast("请选择问题所在街道")
				}
				let params={
					...this.dataForm,
					reportImgs: this.saveParams.pictures, //照片
				}
				this.setData(params)
			},
			setData(params) {
				uni.$u.http.post(`/manage/api/reportRectify/add`, params).then(res => {
					if (res.code == 0) {
						uni.$u.toast('提交成功')
						setTimeout(()=>{
							// 跳转
							uni.navigateTo({
								url: `/pages/home/reportRecord`
							})
						},1000)
						
					}
				}).catch(err => {})
			},
			
			confirm() {
				this.show = false
				const params = {
					...this.drillRecord,
					...{
						drillId: this.id, // 培训id
						drillImgs: this.saveParams.pictures, //照片
						recorderSign: this.drillRecord.recorderSign || this.sign,
					}
				}
				if (params.createTime) delete params.createTime
				if (params.updateTime) delete params.updateTime

				params.draftFlag = 0 // 是否为草稿；0.否  1.是
				this.setData(params)
			},
			cancel() {
				this.show = false
			},

			getdata(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				if (this.pictrueList.length > 0) {
					this.saveParams.pictures = "";
					let arry = []
					this.pictrueList.map(item => {
						arry.push(item.url)
						let dd = {
							url: item.url
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
			deletePicture(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				this.saveParams.pictures = "";
				if (this.pictrueList.length > 0) {

					let arry = []
					this.pictrueList.map(item => {
						arry.push(item.url)
						let dd = {
							url: item.url
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
			
			
			// 附件上传
			getdata3(e) {
				this.wxfileList.push(e);
				if (this.wxfileList.length > 0) {
					let arry = []
					this.wxfileList.map(item => {
						let str = item.name;
						var indexs = str.indexOf(".")
						var resolves = str.substring(indexs + 1, str.length);
						item.fileType = resolves;
					})
				}
				this.getfileListInfoParams(this.wxfileList)
			},
			getfileListInfoParams(list) {
				if (list.length > 0) {
					this.dataForm.reportFiles = "";
					// this.dataForm.fileNames = "";
					// this.dataForm.filePaths = "";
					// this.dataForm.fileSizes = "";
					let arry = []
					let arry2 = []
					let arry3 = []
					list.map(item => {
						arry.push(item.name)
						arry2.push(item.url)
						arry3.push(item.size)
					})
					// this.drillRecord.fileNames = arry.toString();
					// this.drillRecord.filePaths = arry2.toString();
					// this.drillRecord.fileSizes = arry3.toString();
					this.dataForm.reportFiles = arry2.toString();
				}
			},
			//删除附件
			deleteFileitem(item, index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗？',
					success: function(res) {
						if (res.confirm) {
							that.wxfileList.splice(index, 1);
							that.getfileListInfoParams(that.wxfileList)
						} else if (res.cancel) {}
					}
				});

			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.title{
			margin-top: 24rpx;
			margin-left: 32rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			display: flex;
			align-items: center;
			
			.biaoshi{
				width: 8rpx;
				height: 30rpx;
				border-radius: 8rpx;
				background: rgba(23, 100, 206, 1);
				margin-right: 16rpx;
			}
		}
		.my-input {
			width: 100%;
			.u-input {
				background-color: #f2f2f2 !important;
			}
		
			.myLength {
				color: #909193;
				font-size: 12px;
				padding: 1px 4px;
			}
		}
		.tigs{
			margin: 32rpx 40rpx;
			padding: 16rpx 20rpx;
			border-radius: 4px;
			background: rgba(237, 106, 11, 0.1);
			border: 1px solid #ED6A0B;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(237, 106, 11, 1);
		}
		
		
		
		.top {
			background-color: #fff;
			padding: 32rpx;

			.title-top {
				font-size: 17px;
				font-weight: 500;
				color: #2B2B2B;
			}

			.top-tags {
				display: flex;
				font-size: 24rpx;
				margin-top: 16rpx;

				.tag-info {
					border-radius: 4px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 4px 12px;
					background-color: rgba(140, 140, 140, 0.2);
					color: #8C8C8C;
					margin-right: 24rpx;
				}

				.tag-unStart {
					border-radius: 4px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 4px 12px;
					color: rgba(2, 173, 130, 1);
					background: rgba(40, 184, 105, 0.2);
				}
			}
		}

		.my-modal {
			text-align: center;
		}

		.kcInfo {
			padding: 32rpx;
			display: flex;

			.kcInfo-img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 32rpx;
				min-width: 160rpx;
			}

			.kcInfo-con {
				font-weight: 400;
				align-items: flex-end;

				.name {
					font-size: 32rpx;
					color: #2B2B2B;
					margin-bottom: 16rpx;
				}

				.name2 {
					font-size: 28rpx;
					color: #4C4C4C;
				}
			}
		}

		.kcBtn {
			display: flex;
			text-align: center;

			.learn {
				width: 50%;
				border: 2rpx solid #EDEDED;
				padding: 28rpx 0;
				color: black;
			}

			.selectJd {
				width: 100%;
				border: 2rpx solid #EDEDED;
				padding: 28rpx 0;
				color: rgba(15, 83, 172, 1);
			}
		}

		.my-title {
			background-color: #fff;
			padding: 32rpx 32rpx 0 32rpx;
			font-weight: 600;
		}
	}

	.my-btn {
		padding: 12rpx 24rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(15, 83, 172, 1);
		color: rgba(15, 83, 172, 1);
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	.my-btn2 {
		padding: 12rpx 24rpx;
		background: rgba(15, 83, 172, 1);
		border: 1px solid rgba(15, 83, 172, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	.sex-select {
		.sex-item {
			word-break: break-all;
			word-wrap: break-word;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			border: 1px solid #f2f2f2;
			margin: 32rpx;
			border-radius: 8rpx;
			position: relative;

			.item-check {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 12px;
				height: 12px;
				background-color: #0F53AC;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 10px;
				border-radius: 6px 0 0 0;
			}
		}

		.sex-item-active {
			background-color: rgba(15, 83, 172, 0.1);
			color: #0F53AC;
			border: 1px solid #0F53AC;
		}
	}


	.sel {
		color: #999999;
	}

	.tab-list {
		display: flex;
		padding: 24rpx 0 24rpx 20rpx;
		border-radius: 8rpx;
		background: #f2f2f2;
		margin-top: 16rpx;

		.tab-left {
			border-radius: 8rpx;
			display: flex;
			align-items: center;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
			}

			.iconfontsize {
				font-size: 40rpx;
				color: #0F53AC;
			}
		}

		.tab-right {
			width: 100%;
			padding: 0 32rpx 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.data-txt {
				.txt1 {
					// width: 550rpx;
					font-size: 28rpx;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
				}

				.txt2 {
					font-size: 28rpx;
					color: #8c8c8c;
					margin-top: 10rpx;
				}

				.txt3 {
					color: #A6A6A6;
					font-size: 28rpx;
					margin-top: 8rpx;
				}
			}
		}

	}
	
	.tab-list:first-child{
		margin-top: 28rpx;
	}
	.add-file {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 33rpx;
		border: 1px solid #0F53AC;
		margin-top: 30rpx;
		color: #0F53AC;
		width: 220rpx;
		height: 66rpx;
	}

	.bx-upload {
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.bx-title {
		background: #fff;
		padding: 52rpx 30rpx 0;

		.left {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 0px;
			color: #4D4D4D;
			background: #fff;
		}
	}

	/deep/ .u-upload__wrap__preview {
		margin: 0 4vw 4vw 0 !important;
	}

	/deep/ .u-upload__wrap__preview:nth-child(3n) {
		margin-right: 0 !important;
	}
</style>
